<template>
  <div class="common-title" :style="{'background': 'rgba(255,255,255,' + opacityStyle + ')'}" :class="[always ? 'titleBg' : '', mode == 'black' ? 'blackText' : '', !always && mode == 'white' && opacityStyle < 0.5 ? 'whiteText' : 'blackText' ]">
    <div @click="backToApp" class="back">
      <svg t="1604493158145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2077" width="220" height="220"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" p-id="2078"></path></svg>
    </div>
    <div class="title ellipsis">{{title}}</div>
    <!-- <div class="moreOptions" @click="optionClick">{{optionName}}</div> -->
    <div v-if="isShowMoreOption" class="moreOptions" @click="showMoreOptions">
      <p :class="['dot',  mode == 'black' ? 'dot_black' : '', !always && mode == 'white' && opacityStyle < 0.5 ? 'dot_white' : 'dot_black']"></p>
      <transition name="showOption">
        <div v-show="showOption" class="options">
          <span class="iconfont iconsanjiao"></span>
          <div :class="['option', n.method == 'backToHome' ? 'icon_index' : '', n.method == 'showRule' ? 'icon_rule' : '']" v-for="(n, i) in parentOptions" :key="i" @click.stop="() => {optionClick(n.method)}">{{n.name}}</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: 'CommonTitleBar',
  data () {
    return {
      opacityStyle: 0,
      optionArr: [{
        name: '返回首页',
        method: 'backToHome'
      }]
    }
  },
  props: {
    mode: {
      type: String,
      default: 'black'
    },
    optionName: {
      type: String,
      default: ''
    },
    always: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isShowMoreOption: {
      type: Boolean,
      default: false
    }
  },
  computed: mapState({
    showSignUp: state => {
      return state.maskState;
    },
    title: state => {
      return state.title;
    },
    showOption: state => {
      return state.showOption
    },
    deviceEnvironment: state => {
      return state.deviceEnvironment;
    },
    parentOptions: function () {
      return Object.keys(this.options).length ? (this.optionArr.concat(this.options)).reverse() : this.optionArr
    }
  }),
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  unmounted () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    backToApp () {
      if (window.WebViewJavascriptBridge) {
        window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goBack')
      } else {
        this.$router.go(-1)
      }
    },
    backToHome () {
      if (window.WebViewJavascriptBridge) {
        if (this.deviceEnvironment == 'ios') {
          window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('BackHome')
        }
        if (this.deviceEnvironment == 'android') {
          window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goCustomPage', {
            url: 'HomeMainFragment'
          })
        }
      } else {
        // this.$router.go(-1)
      }
    },
    optionClick (method) {
      // this.$emit(this.optionArr[0].method)
      if (method === 'backToHome') {
        this.backToHome()
      } else {
        this.$parent[method]()
      }
      
    },
    showMoreOptions () {
      this.$store.commit('CLOSE_MENU', {
        showOption: !this.showOption
      })
    },
    handleScroll () {
      if (this.always) {
        this.opacityStyle = 1
      } else {
        if (window.scrollY >= 50 && window.scrollY <= 150) {
          this.opacityStyle = (window.scrollY - 50) / 100
        } else if (window.scrollY < 50) {
          this.opacityStyle = 0
        } else if (window.scrollY > 150) {
          this.opacityStyle = 1
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .showOption-enter-active, .showOption-leave-active {
    transition: all 0.2s;
  }
  .showOption-enter, .showOption-leave-to{
    opacity: 0;
  }
  .common-title{
    position: fixed;
    top: 0;
    padding-top: constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
    padding-top: env(safe-area-inset-top);
    width: 100%;
    height: 44px;
    background: rgba(255, 255, 255, 0);
    z-index: 999;
    display: flex;

    .back{
      position: absolute;
      left: 0;
      width: 12%;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;

      svg{
        width: 16px;
        height: 16px;
      }
    }
    .title{
      flex: 1;
      font-size: 18px;
      line-height: 44px;
      text-align: center;
    }
    .moreOptions{
      position: absolute;
      right: 0;
      width: 20%;
      height: 44px;
      font-size: 0.26rem;
      color: #000;
      text-align: center;
      line-height: 44px;
      display: flex;
      justify-content: flex-end;
      .dot{
        width: 1rem;
        height: 100%;
      }
      .dot_black{
        background: url(../assets/images/dot_black.png) no-repeat;
        background-size: 0.4rem;
        background-position: center;
      }
      .dot_white{
        background: url(../assets/images/dot_white.png) no-repeat;
        background-size: 0.4rem;
        background-position: center;
      }
      .options{
        position: absolute;
        top: calc(44px + 0.1rem);
        right: 10px;
        background: #fff;
        border-radius: 0.1rem;
        padding: 0 0.18rem;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);

        .iconsanjiao{
          position: absolute;
          top: -0.11rem;
          right: 0.1rem;
          transform: rotateX(180deg);
          font-size: 0.22rem;
          color: #fff;
          line-height: 1;
        }
        .option{
          height: 0.82rem;
          line-height: 0.82rem;
          color: #000;
          font-size: 0.25rem;
          text-align: left;
          border-bottom: 0.01rem solid #dadada;
          padding-left: 0.42rem;
          white-space: nowrap;
        }
        .icon_index{
          background: url(../assets/images/icon_index.png) no-repeat;
          background-size: 0.3rem;
          background-position: left 45%;
        }
        .icon_rule{
          background: url(../assets/images/icon_rule.png) no-repeat;
          background-size: 0.32rem;
          background-position: left center;
        }
        .option:last-child{
          border: 0;
        }
      }
    }
  }
  .titleBg{
    background: #fff !important;
  }
  .blackText{
    .title{
      color: #000 !important;
    }
    .back svg{
      fill: #000 !important;
    }
  }
  .whiteText{
    .title{
      color: #fff !important;
    }
    .back svg{
      fill: #fff !important;
    }
  }
</style>
